<template>
    <div class="product-filtering-bar">
        <van-button round plain size="mini" :type="buttonIndex === 0 ? 'primary' : undefined" @click="handleClearFiltering">综合
        </van-button>
        <van-button round plain size="mini" :type="buttonIndex === 1 ? 'primary' : undefined" @click="handleSalesFiltering">销量
        </van-button>
        <sort-button round plain size="mini"
                     :type="buttonIndex === 2 ? 'primary' : undefined"
                     v-model="priceSortOrder" @change-order="handleChangePriceSortOrder">
            价格
        </sort-button>
        <van-button round plain size="mini"
                    :type="inventoryStatusButtonType"
                    @click.stop="handleInventoryStatus">
            仅看有货
        </van-button>
    </div>
</template>

<script>
  import _ from "lodash"
  import { Button, Icon } from "vant"
  import SortButton from "@/components/SortButton"
  import { catalog } from "@mall/api-services"

  const InventoryStatus = catalog.InventoryStatus

  export default {
    name: "ProductFilteringBar",
    components: {
      SortButton,
      [Button.name]: Button,
      [Icon.name]: Icon,
    },
    data() {
      return {
        priceSortOrder: "",
        outOfStock: false,
        buttonIndex: 0,
        filtering: {},
        inventoryStatus: undefined,
      }
    },
    computed: {
      inventoryStatusButtonType() {
        const { inventoryStatus } = this
        return inventoryStatus === InventoryStatus.InStock ? "primary" : "default"
      },
    },
    methods: {
      handleInventoryStatus() {
        const { filtering } = this
        this.inventoryStatus = this.inventoryStatus === InventoryStatus.InStock ? undefined : InventoryStatus.InStock

        this.changeFiltering(_.assign(filtering, {
          inventoryStatus: this.inventoryStatus,
        }))
      },
      handleClearFiltering() {
        this.buttonIndex = 0
        this.priceSortOrder = undefined
        this.changeFiltering({})
      },
      handleSalesFiltering() {
        if (this.buttonIndex === 1) {
          return
        }
        this.buttonIndex = 1
        this.priceSortOrder = undefined
        const { filtering } = this
        this.changeFiltering(_.assign(filtering, {
          sort: {
            totalSales: "desc",
          },
        }))
      },
      handleChangePriceSortOrder(direction) {
        this.buttonIndex = direction ? 2 : 0
        if (direction) {
          this.changeFiltering({
            sort: {
              price: direction === "ascend" ? "asc" : "desc",
            },
          })
        } else {
          this.changeFiltering({})
        }
      },
      changeFiltering(filtering) {
        this.$emit("change", filtering)
      },
    },
  }
</script>

<style lang="scss" scoped>
    .product-filtering-bar {
        background: #fff;
        padding: 6px 0;
        display: flex;
        justify-content: space-around;
    }

    .van-button {
        border: none;
        font-size: 14px;

        &:active {
            &:before {
                background: inherit;
            }
        }
    }
</style>
